<!--
 * @Description:  
 * @Author: YiHe
 * @Date: 2020-07-13 10:05:00
 * @LastEditors: YiHe
 * @LastEditTime: 2020-08-17 15:51:08
-->
<template>
	<view>
		<Container class="u-skeleton">
			<EditorIcon type="note" sceneId="0" />
			<view class="header"></view>
			<Head class="head" />
			<text class="header-title u-skeleton-rect">时光手账</text>
			<view class="banner u-skeleton-fillet" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="myNote">
				<ImageLoad v-if="noteData.myNotes.length > 0" :src="noteData.myNotes[0].coverUrl" borderRadius="30" />
				<view v-if="noteData.myNotes.length > 0" class="banner-content fonts">{{ noteData.myNotes[0].title }}</view>
				<u-empty v-if="noteData.myNotes.length === 0" class="fonts" text="点击添加您的时光手账" mode="favor" icon-size="200" font-size="32"></u-empty>
			</view>
			<text class="hot-title u-skeleton-rect">精选</text>
			<view class="hot u-skeleton-fillet" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="columeTap(noteData.choiceNote)">
				<ImageLoad :src="noteData.choiceNote.coverUrl" borderRadius="30" />
				<view class="text fonts">{{ noteData.choiceNote.title }}</view>
			</view>
			<text class="hot-title u-skeleton-rect">社区</text>
			<view class="column-container">
				<view class="column u-skeleton-fillet" @tap="columeTap(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-for="(item, index) in noteData.notes" :key="index">
					<view class="image"><ImageLoad :src="item.coverUrl" borderRadius="30"/></view>
					<text class="title fonts">{{ item.title }}</text>
				</view>
			</view>
		</Container>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
import EditorIcon from '../../components/editorIcon/editorIcon.vue'
import Head from '../../components/head/head.vue'
export default {
	data() {
		return {
			noteData: {
				choiceNote: {},
				myNotes: [],
				notes: []
			},
			loading: true
		}
	},
	components: { Head, EditorIcon },
	onLoad() {
		this.loadData()
	},
	onShow() {
		if (getApp().globalData.noteLoadData) {
			this.loadData()
			getApp().globalData.noteLoadData = false
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/note/note',
			imageUrl: ''
		}
	},
	methods: {
		/**
		 * 获取家长手册
		 */
		loadData: async function() {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadNoteList, { deviceUuid: this.deviceUuid }))
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				const timer2 = setTimeout(() => {
					this.loadData()
				}, 1000)
				this.$once('hook:beforeDestory', function() {
					clearInterval(timer2)
				})
				return
			}
			this.noteData = data
			uni.hideLoading()
			//隐藏骨架屏
			this.loading = false
		},
		/**
		 *  点击进入我的手册
		 */
		myNote: function() {
			if (this.noteData.myNotes.length === 0) {
				this.$Router.push({ name: 'editorTopic', query: { type: 'note' } })
				return
			}
			this.$Router.push({ name: 'noteUserDetail', query: { item: JSON.stringify(this.noteData.myNotes) } })
		},
		/**
		 *	点击进入详情
		 */
		columeTap: function(items) {
			this.$Router.push({ name: 'noteDetail', query: { item: JSON.stringify(items) } })
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	width 750rpx
	height 450rpx
	background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
	position absolute

.header-title
	color white
	font-size 55rpx
	width fit-content
	font-weight bold
	margin 110rpx auto 30rpx auto
	text-shadow 2rpx 2rpx 2rpx #EFBC34
	z-index 1

.banner
	width 680rpx
	height 800rpx
	margin 20rpx auto
	z-index 1
	position relative
	border-radius 30rpx
	overflow hidden
	transform translate3d(0, 0, 0)
	transition all 0.3s
	background #ebeef5
	box-shadow 0 0 50rpx #c0c4cc

	.banner-content
		color white
		font-size 42rpx
		height 100rpx
		width 690rpx
		position absolute
		left 0
		bottom 0
		line-height 100rpx
		text-align right
		padding-right 30rpx
		box-sizing border-box
		background linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))

.head
	position absolute
	top 100rpx
	left 50rpx
	z-index 1

.hot-title
	font-size 50rpx
	margin-left 40rpx
	margin-top 40rpx
	position relative
	width fit-content
	z-index 1
	font-weight bold

.hot
	width 680rpx
	height 800rpx
	margin 20rpx auto
	position relative
	border-radius 30rpx
	transition all 0.3s
	overflow hidden
	transform translate3d(0, 0, 0)
	box-shadow 0 0 50rpx #909399

	.text
		color white
		font-size 40rpx
		height 120rpx
		width 680rpx
		position absolute
		left 0
		top 0
		padding 20rpx 0 0 20rpx
		box-sizing border-box
		background linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))
		display flex
		flex-direction column

.column-container
	width 680rpx
	height auto
	margin 20rpx auto
	display flex
	flex-wrap wrap
	align-content center
	justify-content space-between

	.column
		width 320rpx
		height 380rpx
		margin-bottom 50rpx
		background white
		border-radius 30rpx
		box-shadow 0 0 50rpx #dcdfe6
		display flex
		flex-direction column
		overflow hidden
		transform translate3d(0, 0, 0)
		transition all 0.3s

		.image
			width 320rpx
			height 320rpx
			position relative

		.title
			color #606266
			font-size 30rpx
			line-height 60rpx
			height 60rpx
			text-align center
</style>
